<template>
    <div>
    <p style="color:green">>请在框中输入分值</p>
    <p style="color:red">>优秀：86分以上，称职70-85，基本称职60-69，不称职：59分以下</p>
    <p style="color:red">>任何一项不填或者100分，0分者视为无效，不能提交</p>
    <el-form
            ref="myForm"
            style="max-width: 800px;"
            :model="numberValidateForm"
            label-width="auto"
            class="demo-ruleForm"
    >
        <el-form-item
                label="政治思想建设"
                prop="item1"
                :rules="[
        { required: true, message: '请填写' },
        { type: 'number', message: '请填写数字' },
        {pattern:/^[1-9][0-9]{0,1}$/ , message: '成绩需在1-99之间', trigger: 'blur'}
      ]"
        >
            <div>
            <el-input
                    ref="item1"
                    @keydown.down="keydown('item2')"
                    v-model.number="numberValidateForm.item1"
                    type="text"
                    autocomplete="off"
                    style="width:50px"
            />&nbsp;&nbsp;&nbsp;&nbsp;全面考核领导班子坚持和加强党的全面领导，执行党的理论和路线方针政策情况
            </div>
        </el-form-item>
        <el-form-item
                label="领导能力"
                prop="item2"
                :rules="[
       { required: true, message: '请填写' },
        { type: 'number', message: '请填写数字' },
        {pattern:/^[1-9][0-9]{0,1}$/ , message: '成绩需在1-99之间', trigger: 'blur'}
      ]"
        >
            <el-input
                    ref="item2"
                    @keydown.up="keyup('item1')"
                    @keydown.down="keydown('item3')"
                    v-model.number="numberValidateForm.item2"
                    type="text"
                    autocomplete="off"
                    style="width:50px"
            />&nbsp;&nbsp;&nbsp;&nbsp;全面考核领导班子适应新时代要求，完成目标任务和重点工作的能力
        </el-form-item>
        <el-form-item
                label="工作实绩"
                prop="item3"
                :rules="[
       { required: true, message: '请填写' },
        { type: 'number', message: '请填写数字' },
        {pattern:/^[1-9][0-9]{0,1}$/ , message: '成绩需在1-99之间', trigger: 'blur'}
      ]"
        >
            <el-input
                    ref="item3"
                    @keydown.up="keyup('item2')"
                    @keydown.down="keydown('item4')"
                    v-model.number="numberValidateForm.item3"
                    type="text"
                    autocomplete="off"
                    style="width:50px"
            />&nbsp;&nbsp;&nbsp;&nbsp;全面考核领导班子履行工作职责、管理与服务效果，推动发展成效
        </el-form-item>
        <el-form-item
                label="党风廉政建设"
                prop="item4"
                :rules="[
        { required: true, message: '请填写' },
        { type: 'number', message: '请填写数字' },
        {pattern:/^[1-9][0-9]{0,1}$/ , message: '成绩需在1-99之间', trigger: 'blur'}
      ]"
        >
            <el-input
                    ref="item4"
                    @keydown.up="keyup('item3')"
                    @keydown.down="keydown('item5')"
                    v-model.number="numberValidateForm.item4"
                    type="text"
                    autocomplete="off"
                    style="width:50px"
            />&nbsp;&nbsp;&nbsp;&nbsp;全面考核领导班子履行管党治党政治责任，贯彻落实中央、省委和学校党委的决策部署情况
        </el-form-item>
        <el-form-item
                label="作风建设"
                prop="item5"
                :rules="[
       { required: true, message: '请填写' },
        { type: 'number', message: '请填写数字' },
        {pattern:/^[1-9][0-9]{0,1}$/ , message: '成绩需在1-99之间', trigger: 'blur'}
      ]"
        >
            <el-input
                    ref="item5"
                    @keydown.up="keyup('item4')"
                    v-model.number="numberValidateForm.item5"
                    type="text"
                    autocomplete="off"
                    style="width:50px"
            />&nbsp;&nbsp;&nbsp;&nbsp;全面考核领导班子牢固树立宗旨意识，密切联系师生，全心全意为师生服务的情况
        </el-form-item>
            <div>最终分数：<span style="color:red">{{numberValidateForm.score}}</span>分</div>
        <el-form-item
                prop="detail"
        >
            <el-input
                    v-model.number="numberValidateForm.detail"
                    type="textarea"
                    autocomplete="off"
                    style="width:400px"
                    :disabled="numberValidateForm.score>=60"
            />&nbsp;&nbsp;&nbsp;&nbsp;如果最终分数低于60分，请写明理由，否则不能提交
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>
<script setup>
import { get,post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import router from '@/router'
import { ref,onMounted,getCurrentInstance } from 'vue'
import {userStore} from '@/stores/counter.js'
import { reactive } from 'vue'

const {proxy} = getCurrentInstance()
const numberValidateForm = reactive({
  item1: '',
  item2: '',
  item3: '',
  item4: '',
  item5: '',
  detail:'',
  votepart:'',
  score:0
})
const myForm=ref(null)
numberValidateForm.votepart=decodeURIComponent(window.location.pathname.split('/').pop())
setInterval(function(){
numberValidateForm.score=(Number(numberValidateForm.item1)+Number(numberValidateForm.item2)+Number(numberValidateForm.item3)
+Number(numberValidateForm.item4)+Number(numberValidateForm.item5))/5
})

const submitForm=()=>{
 if (myForm.value) {
        myForm.value.validate((valid) => {
          if (valid) {
          if(numberValidateForm.score<60&&numberValidateForm.detail==''){
          alert('分数低于60分，请填写原因');
          }else {
           // 提交表单逻辑
          post('/voting/votePart',{
          item1:numberValidateForm.item1 ,
          item2: numberValidateForm.item2,
          item3: numberValidateForm.item3,
          item4: numberValidateForm.item4,
          item5: numberValidateForm.item5,
          detail:numberValidateForm.detail,
          votepart:numberValidateForm.votepart,
          score:numberValidateForm.score
          },(message)=>{
          ElMessage.success(message)
          router.push('/index')
          },(message)=>{
          ElMessage.warning(message)
          })
          }
          } else {
            alert('请根据提示修改数据');
          }
        });
      }
}

const keyup=(up)=>{
if(up=='item1')
proxy.$refs.item1.focus()
else if(up=='item2')
proxy.$refs.item2.focus()
else if(up=='item3')
proxy.$refs.item3.focus()
else if(up=='item4')
proxy.$refs.item4.focus()
}

const keydown=(down)=>{
if(down=='item2')
proxy.$refs.item2.focus()
else if(down=='item3')
proxy.$refs.item3.focus()
else if(down=='item4')
proxy.$refs.item4.focus()
else if(down=='item5')
proxy.$refs.item5.focus()
}

</script>
<style scoped>
</style>